<template>
  <div class="visitor_out">
    <n-spin :show="show">
      <div class="table_v">
        <n-data-table
          :columns="columns"
          :data="data"
          :pagination="pagination"
          :row-key="(row) => row.number"
          :loading="false"
        >
          <template #empty>
            <n-empty description="你什么也找不到" size="large">
              <template #extra>
                {{ show == true ? "正在加载数据" : "无数据" }}
              </template>
            </n-empty>
          </template>
        </n-data-table>
      </div>
    </n-spin>
  </div>
</template>

<script>
import { getnotLoadFinger } from "@/api/finger.js";
import { NButton, useMessage } from "naive-ui";
import { h, reactive, onMounted, toRefs } from "vue";
import { useRouter } from "vue-router";
// import { useRouter } from "vue-router";
const createColumns = ({ sendMail }) => {
  return [
    {
      title: "序号",
      key: "number",
    },
    {
      title: "姓名",
      key: "realName",
    },
    {
      title: "登记",
      key: "actions",
      render(row) {
        return h(
          NButton,
          {
            size: "small",
            onClick: () => sendMail(row),
          },
          { default: () => "注册指纹" }
        );
      },
    },
  ];
};
// function speckText(str) {
//   var url =
//     "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=6&text=" +
//     encodeURI(str);
//   new Audio(url).play();
//   //var n = new Audio(url);
//   //n.src = url;
//   //n.play();
// }
export default {
  name: "Vistor",
  setup() {
    const router = useRouter();
    // const message = useMessage();
    const state = reactive({
      visitor: [],
      show: true,
      params: {
        id: "",
      },
    });
    const message = useMessage();
    //获取colmuns的列表
    //获取数据列表
    const getvisitor = async () => {
      try {
        const { data } = await getnotLoadFinger();
        console.log(
          "%c 🍖 data: ",
          "font-size:20px;background-color: #ED9EC7;color:#fff;",
          data
        );
        data.forEach((item, index) => {
          item.number = index + 1;
        });
        state.visitor.push(...data);
        state.show = false;
      } catch {
        message.error("获取访客签退信息错误！！！", {
          duration: 5000,
          closable: true,
        });
      }
    };
    onMounted(() => {
      getvisitor();
    });
    // const refreshdata = () => {
    //   if (state.visitor.length != 0) {
    //     state.visitor.forEach((item, index) => {
    //       if (item.id == state.params.id) {
    //         state.visitor.splice(index, 1);
    //       }
    //     });
    //   }
    // };
    //提交数据工作
    const sign = async () => {
      try {
        router.push(`/registerfinger/${state.params.id}`);
      } catch {
        message.error("注册程序错误！！！", {
          duration: 5000,
          closable: true,
        });
      }
    };
    return {
      sign,
      ...toRefs(state),
      data: state.visitor,
      columns: createColumns({
        sendMail(row) {
          state.params.id = row.id;
          sign();
        },
      }),
      pagination: {
        pageSize: 8,
      },
    };
  },
};
</script>
<style lang="scss">
.visitor_out {
  width: 100%;
  overflow: hidden;
  .table_v {
    width: 90%;
    margin: 20px auto;
    background-color: #fff;
  }
}
</style>
